<template>
  <div class="dept-recommend-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>科室推荐</h1>
      <p class="subtitle">基于您的症状，我们为您推荐以下科室</p>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-container">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索科室或症状"
        :prefix-icon="Search"
        clearable
        @input="handleSearch"
        class="search-input"
      />
    </div>
    
    <!-- 推荐科室列表 -->
    <div class="dept-list">
      <div class="section-title">为您推荐</div>
      <div class="dept-grid">
        <DeptCard
          v-for="dept in recommendedDepartments"
          :key="dept.id"
          :department="dept"
          @click="goToDeptDetail(dept.id)"
          recommended
        />
      </div>
    </div>
    
    <!-- 全部科室列表 -->
    <div class="dept-list">
      <div class="section-title">全部科室</div>
      <div class="dept-grid">
        <DeptCard
          v-for="dept in filteredDepartments"
          :key="dept.id"
          :department="dept"
          @click="goToDeptDetail(dept.id)"
        />
      </div>
    </div>
    
    <!-- 热门症状推荐 -->
    <div class="symptoms-section">
      <div class="section-title">热门症状</div>
      <div class="symptoms-tags">
        <el-tag
          v-for="symptom in hotSymptoms"
          :key="symptom.id"
          type="info"
          effect="plain"
          @click="handleSymptomClick(symptom.name)"
          class="symptom-tag"
        >
          {{ symptom.name }}
        </el-tag>
      </div>
    </div>
    
    <!-- 返回问诊按钮 -->
    <div class="back-button-container">
      <el-button
        type="primary"
        :icon="ArrowLeft"
        @click="goBackToConsult"
        class="back-button"
      >
        返回智能问诊
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, ArrowLeft } from '@element-plus/icons-vue'
import DeptCard from '../../components/DeptCard.vue'
import { getDepartments } from '../../api/consult'

const router = useRouter()
const searchKeyword = ref('')
const departments = ref([])
const recommendedDepartments = ref([])
const hotSymptoms = ref([
  { id: 1, name: '头痛' },
  { id: 2, name: '发热' },
  { id: 3, name: '咳嗽' },
  { id: 4, name: '腹痛' },
  { id: 5, name: '腹泻' },
  { id: 6, name: '胸闷' },
  { id: 7, name: '关节疼痛' },
  { id: 8, name: '高血压' }
])

// 过滤后的科室列表
const filteredDepartments = computed(() => {
  if (!searchKeyword.value) {
    return departments.value.filter(dept => 
      !recommendedDepartments.value.some(recDept => recDept.id === dept.id)
    )
  }
  
  const keyword = searchKeyword.value.toLowerCase()
  return departments.value.filter(dept => 
    (dept.name.toLowerCase().includes(keyword) || 
     dept.description.toLowerCase().includes(keyword) ||
     dept.symptoms.some(symptom => symptom.toLowerCase().includes(keyword)))
    && !recommendedDepartments.value.some(recDept => recDept.id === dept.id)
  )
})

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已在computed属性中处理
}

// 处理症状点击
const handleSymptomClick = (symptomName) => {
  searchKeyword.value = symptomName
}

// 跳转到科室详情
const goToDeptDetail = (deptId) => {
  router.push(`/dept-detail/${deptId}`)
}

// 返回智能问诊
const goBackToConsult = () => {
  router.push('/consult')
}

// 获取科室数据
const fetchDepartments = async () => {
  try {
    const result = await getDepartments()
    departments.value = result
    
    // 从路由参数中获取推荐科室ID，如果没有则默认推荐前3个
    const route = router.currentRoute.value
    const recommendedIds = route.query.recommendedIds ? 
      JSON.parse(route.query.recommendedIds) : 
      departments.value.slice(0, 3).map(dept => dept.id)
    
    // 筛选推荐科室
    recommendedDepartments.value = departments.value.filter(dept => 
      recommendedIds.includes(dept.id)
    )
  } catch (error) {
    console.error('获取科室列表失败:', error)
  }
}

onMounted(() => {
  fetchDepartments()
})
</script>

<style scoped>
.dept-recommend-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: #666;
}

.search-container {
  margin-bottom: 30px;
}

.search-input {
  max-width: 600px;
  margin: 0 auto;
}

.dept-list {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.symptoms-section {
  margin-bottom: 40px;
}

.symptoms-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.symptom-tag {
  cursor: pointer;
  transition: all 0.3s ease;
}

.symptom-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.back-button-container {
  text-align: center;
  margin-top: 40px;
}

.back-button {
  padding: 12px 32px;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dept-recommend-page {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .dept-grid {
    grid-template-columns: 1fr;
  }
  
  .symptoms-tags {
    justify-content: center;
  }
}
</style>